<template>
  <div>
    <div class="overview_box">
      <div
        class="right-sun-tab"
        v-for="(item, index) in overviewList"
        :key="index"
      >
        <img
          :src="item.imgName"
          alt=""
        />
        <div class="right-value">
          <div>{{ item.name }}</div>
          <div class="right-value-bo">
            <div>{{ item.value }}</div>
            <!-- <div>家</div> -->
          </div>
        </div>
      </div>
    </div>
    <div
      class="tree04"
      style="z-index: 10"
    >
      <div class="left_box">
        <!-- 搜索框 -->
        <div class="search">
          <img
            class="icon"
            :src="require('../../assets/screen/search.png')"
            alt=""
          />
          <input
            v-model="searchKey"
            class="serach_input"
            @input="searchEvent"
            @focus="searchEvent"
            @blur="closeDrop"
          />
          <ul
            class="options"
            v-if="inputList && inputList.length > 0"
          >
            <li
              class="options_item"
              v-for="(item, index) in inputList"
              :key="index"
              @click="inputSearch(item)"
            >
              <span class="title_type">{{ item.key }}</span>
              <span class="text_type">{{ item.value }}</span>
            </li>
          </ul>
          <!-- <div
          class="btn"
          @click="getQueryMainPageSeachItem()"
        >搜索</div> -->
        </div>
        <!-- <div class="search-all">
        <el-input
          placeholder=""
          v-model="searchKey"
        >
          <i
            slot="prefix"
            class="el-input__icon el-icon-search"
          ></i>
        </el-input>
      </div> -->
        <div class="title_box">
          <!-- 当前的路径 -->
          <div
            class="has-select"
            v-if="path"
            v-html="path"
          ></div>
        </div>
        <div
          class="seeTree-page"
          id="app"
        >
          <div
            class="right-icon"
            @click="toggle('')"
          >
            <img
              src="~img/tree-qh.png"
              alt=""
              v-if="leftType === 'tree'"
            />
            <img
              src="~img/sun-qh.png"
              alt=""
              v-if="leftType === 'sun'"
            />
          </div>
          <!-- 树状图 -->
          <div
            id="treeRoot"
            v-if="leftType === 'tree'"
          ></div>
          <!-- 旭日图 -->
          <sun
            ref="sun"
            v-if="leftType === 'sun'"
            @sunSearch="sunSearch"
          ></sun>
        </div>
      </div>
      <!-- 树状图 -->
      <!-- <div class="right_box" v-show="leftType === 'tree'"> -->
      <div
        class="right_box"
        v-show="leftType === false"
      >
        <div
          class="tree_branch"
          @click="branchClick"
        >
          {{ branchCheck.name }}
        </div>
        <div style="display: flex">
          <div class="right_head">企业统计</div>
          <div
            class="top_ss"
            @click="showMore = !showMore"
          >
            <img
              src="~/img/jiantou.png"
              alt=""
            />
          </div>
        </div>
        <!-- 筛选条件 -->
        <TagSelect
          v-show="showMore"
          @goTagMul="goTagMul"
        ></TagSelect>
        <!-- 排序 -->
        <div class="qylb_text">
          <div
            class="sort_all"
            v-for="(item, index) in sortList"
            :key="index"
          >
            <div
              class="sort_item"
              :class="{
                active:
                  sortNowName === item.title && (item.sortUp || item.sortDown),
              }"
            >
              {{ item.title }}
            </div>
            <div class="sort_sort_right">
              <div @click="sortBy(item, 'sortUp')">
                <img
                  src="~img/tran_up.svg"
                  alt=""
                  v-if="!item.sortUp"
                />
                <img
                  src="~img/tran_up_sel.svg"
                  alt=""
                  v-if="item.sortUp"
                />
              </div>
              <div @click="sortBy(item, 'sortDown')">
                <img
                  src="~img/tran_down.svg"
                  alt=""
                  v-if="!item.sortDown"
                />
                <img
                  src="~img/tran_down_sel.svg"
                  alt=""
                  v-if="item.sortDown"
                />
              </div>
            </div>
          </div>
          <div
            class="fenbu-qy"
            v-if="false"
          >
            <img
              src="~img/position.svg"
              alt=""
            />
            企业分布
          </div>
          <!-- <div
          class="go-area"
          @click="goMap"
        >分布情况</div> -->
        </div>
        <!-- 企业列表 -->
        <div class="right_bottom">
          <div
            class="right_bottom_box"
            v-for="(item, index) in bankList"
            :key="index"
            @click="openRelation(item)"
          >
            <div
              class="short_name"
              :style="{
                backgroundColor:
                  index % 2 == 0
                    ? '#55926f'
                    : index % 3 == 0
                      ? '#ce6946'
                      : index % 4 == 0
                        ? '#3c8cf7'
                        : '#e4a657',
              }"
              v-if="item.shortName"
            >
              {{ item.shortName }}
            </div>
            <div
              class="short_name2"
              :style="{
                backgroundColor:
                  index % 2 == 0
                    ? '#55926f'
                    : index % 3 == 0
                      ? '#ce6946'
                      : index % 4 == 0
                        ? '#3c8cf7'
                        : '#e4a657',
              }"
              v-else
            >
              无
            </div>
            <div class="right_bottom_right">
              <div
                class="qy_name"
                :title="item.gsmc"
              >{{ item.gsmc }}</div>
              <div class="tag-qy">{{ item.jyzt }}</div>
            </div>
            <div class="right-tupu">
              <img
                src="~/img/tupu.png"
                alt=""
              />
            </div>
          </div>
        </div>
      </div>
      <!-- 旭日图 -->
      <!-- <div class="right_box" v-show="leftType === 'sun'"> -->
      <div
        class="right_box"
        :class="screenIsShow ? 'boxhidden' : 'boxauto'"
      >
        <!-- <div class="tree_branch" @click="branchClick">
        {{ branchCheck.name }}
      </div> -->
        <div
          class="tree_branch"
          @click="branchClick"
        >更多》</div>
        <div class="right_head">企业统计</div>
        <!-- 顶部tab -->
        <div class="right-sun-all">
          <div
            class="right-sun-tab"
            v-for="(item, index) in sunTanList"
            :key="index"
          >
            <img
              :src="item.imgName"
              alt=""
            />
            <div class="right-value">
              <div>{{ item.name }}</div>
              <div class="right-value-bo">
                <div>{{ item.value }}</div>
                <div>家</div>
              </div>
            </div>
          </div>
        </div>
        <!-- 排序 -->
        <div class="qylb_text">
          <div
            class="sort_all"
            v-for="(item, index) in sortList"
            :key="index"
          >
            <div
              class="sort_item"
              :class="{
                active:
                  sortNowName === item.title && (item.sortUp || item.sortDown),
              }"
            >
              {{ item.title }}
            </div>
            <div class="sort_sort_right">
              <div @click="sortBy(item, 'sortUp')">
                <img
                  src="~img/tran_up.svg"
                  alt=""
                  v-if="!item.sortUp"
                />
                <img
                  src="~img/tran_up_sel.svg"
                  alt=""
                  v-if="item.sortUp"
                />
              </div>
              <div @click="sortBy(item, 'sortDown')">
                <img
                  src="~img/tran_down.svg"
                  alt=""
                  v-if="!item.sortDown"
                />
                <img
                  src="~img/tran_down_sel.svg"
                  alt=""
                  v-if="item.sortDown"
                />
              </div>
            </div>
          </div>
          <div class="fenbu-qy" @click="goQyfb">
            <img src="~img/position.svg" alt="" />
            企业分布
          </div>
          <!-- <div
          class="go-area"
          @click="goMap"
        >分布情况</div> -->
        </div>
        <!-- 企业列表 -->
        <div class="right_bottom">
          <div
            class="right_bottom_box"
            v-for="(item, index) in bankList"
            :key="index"
            @click="openRelation(item)"
          >
            <div
              class="short_name"
              :style="{
                backgroundColor:
                  index % 2 == 0
                    ? '#55926f'
                    : index % 3 == 0
                      ? '#ce6946'
                      : index % 4 == 0
                        ? '#3c8cf7'
                        : '#e4a657',
              }"
              v-if="item.shortName"
            >
              {{ item.shortName }}
            </div>
            <div
              class="short_name2"
              :style="{
                backgroundColor:
                  index % 2 == 0
                    ? '#55926f'
                    : index % 3 == 0
                      ? '#ce6946'
                      : index % 4 == 0
                        ? '#3c8cf7'
                        : '#e4a657',
              }"
              v-else
            >
              无
            </div>
            <div class="right_bottom_right">
              <div
                class="qy_name"
                :title="item.gsmc"
              >{{ item.gsmc }}</div>
              <div class="tag-qy">{{ item.jyzt }}</div>
            </div>
            <div class="right-tupu">
              <img
                src="~/img/tupu.png"
                alt=""
              />
            </div>
          </div>
        </div>

        <div
          class="screen_button"
          v-if="!screenIsShow && leftType === 'tree'"
          @click="screenSwitch(true)"
        >
          筛<br />选
        </div>
        <!-- 筛选弹窗 -->
        <div
          name="fade"
          v-show="screenIsShow"
        >
          <div class="screen_pop">
            <div
              class="screen_pop_button"
              @click="screenSwitch(false)"
            >
              筛<br />选
            </div>
            <!-- 筛选条件 -->
            <TagSelect
              v-show="showMore"
              @goTagMul="goTagMul"
            ></TagSelect>

            <!-- 排序 -->
          </div>
        </div>
      </div>
      <!-- 展示关联关系 -->
      <relation ref="relation"> </relation>
    </div>
  </div>
</template>

<script>
// import companyJson from '../../assets/data/testGuanxi.json';
import relation from "./TreeAnalysis/relation.vue";
import $ from "jquery";
// import * as d3 from "./js/d3.v5";
import * as d3 from "d3";
// import { getTdpCybqCount, getCompByBigScreenTree } from 'apis/Platform';
import TagSelect from "./TagSelect.vue";
import sun from "./TreeAnalysis/sun.vue";
// import { test1 } from "@/assets/common/tree.js";
import {
  getIndustrialChainNew,
  getListBy,
  queryLabCountForRS,
} from "@/api/screen/industryGraph";
import { queryMainPageSeachItem } from "@/api/screen/index";

let svg;
let dirRight;
let forUpward;
let leng;
let circlewidth1;
let circlewidth2;
let circlewidth3;
let margin1 = { top: 50, right: 20, bottom: -20, left: 0 };
export default {
  components: {
    relation,
    TagSelect,
    sun,
  },
  props: {},
  data () {
    return {
      direction: "rtl",
      branchCheck: { name: "" },
      dropName: "",
      labelParams: {},
      labelParamsClone: {},
      headTrue: null,
      bankList: [],
      inputList: [],
      headList: [
        {
          title: "进出口",
          key: "isJckCount",
          value: "",
        },
        {
          title: "社保人数超百人",
          key: "isSbbrCount",
          value: "",
        },
        {
          title: "社保人数超二十",
          key: "isSbesCount",
          value: "",
        },
        {
          title: "年营收超百万",
          key: "isYsbwCount",
          value: "",
        },
        {
          title: "近期有融资",
          key: "isRzCount",
          value: "",
        },
        {
          title: "注册资本超百万",
          key: "isZcbwCount",
          value: "",
        },
      ],
      container: null, //容器svg>g
      duration: 500, //动画持续时间
      scaleRange: [0.2, 2], //container缩放范围
      direction: ["r"], //分为左右2个方向
      centralPoint: [0, 0], //画布中心点坐标x,y
      root: { r: {} }, //左右2块数据源
      rootNodeLength: 0, //根节点名称长度
      companyName: [""], //根节点名称
      textSpace: 22, //多行文字间距
      themeColor: "#2196F3", //主色
      nodeSize: [50, 100], //节点间距(高/水平)
      fontSize: 18, //字体大小，也是单字所占宽高
      rectMinWidth: 50, //节点方框默认最小，
      textPadding: 8, //文字与方框间距,注：固定值5
      circleR: 8, //圆圈半径
      dirRight: "",
      selectWidth: "", // 选中节点的宽度
      topObj: {},
      keyName: "",
      typeName: "",
      showLong: "",
      sortNowName: "",
      sortList: [
        {
          title: "产业链相关度",
          sortUp: false,
          sortDown: false,
        },
        {
          title: "征信评分",
          sortUp: false,
          sortDown: false,
        },
        {
          title: "注册资本",
          sortUp: false,
          sortDown: false,
        },
      ],

      leftType: "sun",
      overviewList: [
        {
          name: "全部企业",
          key: "isJckCount",
          value: "10.9万户",
          imgName: require("../../assets/screen/zyqy_icon.png"),
        },
        {
          name: "上市企业",
          key: "isSbbrCount",
          value: "1.71万户",
          imgName: require("../../assets/screen/ssqy_icon.png"),
        },
        {
          name: "大型企业",
          key: "isSbbrCount",
          value: "6.6万户",
          imgName: require("../../assets/screen/dxqy_icon.png"),
        },
        // {
        //   name: "科创企业",
        //   key: "isSbbrCount",
        //   value: "90.6万户",
        //   imgName: require("../../assets/screen/nyscbr.png"),
        // },
         {
          name: "高新技术企业",
          key: "isSbbrCount",
          value: "4.6万户",
          imgName: require("../../assets/screen/kcqy_icon.png"),
        },
         {
          name: "专精特新企业",
          key: "isSbbrCount",
          value: "1.6万户",
          imgName: require("../../assets/screen/zyqy_icon.png"),
        },
        {
          name: "进出口企业",
          key: "isSbbrCount",
          value: "2.6万户",
          imgName: require("../../assets/screen/jckqy_icon.png"),
        },
      ],
      sunTanList: [
        // {
        //   name: "进出口",
        //   key: "isJckCount",
        //   value: "",
        //   imgName: require("../../assets/screen/jck.png"),
        // },
        {
          name: "社保人数超百人",
          key: "isSbbrCount",
          value: "2790",
          imgName: require("../../assets/screen/sbrscbr.png"),
        },
        // {
        //   name: "社保人数二十人",
        //   key: "isSbbrCount",
        //   value: "",
        //   imgName: require("../../assets/screen/sbrscbr.png"),
        // },
        {
          name: "年营收超百万",
          key: "isYsbwCount",
          value: "4030",
          imgName: require("../../assets/screen/nyscbr.png"),
        },
        // {
        //   name: "近期有融资",
        //   key: "isRzCount",
        //   value: "",
        //   imgName: require("../../assets/screen/jqyrz.png"),
        // },
        {
          name: "注册资本超百万",
          key: "isZcbwCount",
          value: "5885",
          imgName: require("../../assets/screen/zczbcbw.png"),
        },
        // {
        //   name: '上市公司',
        //   value: '',
        //   imgName: require('../../assets/screen/ssgs.png')
        // },
      ],
      showMore: true,
      path: "", // 当前的路径
      oriList: [], // 树状图数据
      paramsList: {}, // 企业列表查询条件
      labs: [],
      timer: "",
      searchKey: "",
      screenIsShow: false,
    };
  },
  created () {
    this.getInputList = this.debounce(this.getQueryMainPageSeachItem1, 500);
  },
  mounted () {
    // 数据处理
    // this.getRightDetails();
  },
  computed: {
    treeMap () {
      return d3
        .tree()
        .nodeSize(this.nodeSize)
        .separation((a, b) => {
          let result =
            a.parent === b.parent && !a.children && !b.children ? 1 : 2;
          return result;
        });
    },
  },
  watch: {},
  methods: {
    screenSwitch (val) {
      this.screenIsShow = val;
    },
    branchClick () {
      this.$emit("branchClick", this.branchCheck, this.path);
    },
    // 初始化
    async getData (item = "", need = true) {
      let data = "";
      // 中心点名称
      this.companyName = [this.dropName];
      console.log(this.dropName, "this.dropNamethis.dropName");
      // switch (this.dropName) {
      //   case "电子信息产业":
      //     const showDzxxcyList = await this.getTree(this.dropName);
      //     this.initInfo(showDzxxcyList);
      //     break;
      //   case "装备制造产业":
      //     data = zbzjcyList;
      //     const showZbzjcyList = this.getList(data);
      //     this.initInfo(showZbzjcyList);
      //     break;
      //   case "生物医药产业":
      //     data = swyycyList;
      //     const showSwyycyList = this.getList(data);
      //     this.initInfo(showSwyycyList);
      //     break;
      //   case "先进材料产业":
      //     data = xjclcyList;
      //     const showXjclcyList = this.getList(data);
      //     this.initInfo(showXjclcyList);
      //     break;
      //   case "新能源汽车产业":
      //     data = xnyqcList;
      //     const showXnyqcList = this.getList(data);
      //     this.initInfo(showXnyqcList);
      //     break;
      //   default:
      //     break;
      // }
      if (need) {
        const allList = await this.getTree(this.dropName);
        this.initInfo(allList);
      }
      // 获取企业列表
      this.path = item ? item.path : this.path;
      getListBy({
        lx: this.dropName,
        labs: this.labs,
        // orderBy:"rjzczb", 排序字段
        // orderByType:"desc", // 排序方式 ""/"desc"
        pageNum: 0,
        pageSize: 200,
        gsmc: this.searchKey,
        ...item.params,
      }).then((res) => {
        this.bankList = res.rows;
      });
    },
    // 打开关联图谱
    openRelation (item) {
      this.$refs.relation.showRelation(item.tydm);
    },
    // 图谱切换
    toggle (item = "", update = true) {
      if (item) {
        this.dropName = item.params.lx;
        this.searchKey = item.params.gsmc;
      }
      if (update) {
        if (this.leftType === "tree") {
          console.log(this.dropName, "到这了");
          this.leftType = "sun";
          // 更新旭日图
          this.$nextTick(() => {
            this.$refs.sun.initInfo(this.dropName);
            this.getData();
          });
        } else {
          // 更新树状图
          this.leftType = "tree";
          this.$nextTick(() => {
            this.getData(item);
          });
        }
      } else {
        if (this.leftType === "sun") {
          // 更新旭日图
          this.$nextTick(() => {
            this.$refs.sun.initInfo(this.dropName);
            // this.$refs.sun.goSearch({ data: { path: this.dropName } }); //旭日图标题
            this.getData();
          });
        } else {
          // 更新树状图
          this.$nextTick(() => {
            this.getData(item, false);
          });
        }
      }
    },
    // 初始化方法
    toggle1 (item = "", update = true) {
      this.leftType = '';
      // 更新树状图
      this.$nextTick(() => {
        this.leftType = "tree";
        this.getData(item);
      });
    },
    // 获取对应产业的树
    async getTree (type) {
      try {
        const params = {
          lx: type,
        };
        const res = await getIndustrialChainNew(params);
        // console.log(res, 'res');
        if (res.code == 200) {
          this.oriList = JSON.parse(JSON.stringify(res.data));
          return this.getList(res.data);
        } else {
          return [];
        }
      } catch (error) {
        console.error(error);
      }
    },
    // 跳转企业分布
    goMap () {
      console.log(this.title, this.keyName, this.typeName, "参数");
      this.$router.push({
        name: "EnterpriseDistribution",
        query: {
          title: this.title,
          keyName: this.keyName,
          typeName: this.typeName,
          labelParams: JSON.stringify(this.labelParams),
        },
      });
    },
    sortBy (item, key) {
      this.sortNowName = item.title;
      item[key] = !item[key];
      if (key === "sortUp") {
        item.sortDown = false;
      } else {
        item.sortUp = false;
      }
      this.sortList
        .filter((val) => val.title !== item.title)
        .forEach((pre) => {
          pre.sortDown = false;
          pre.sortUp = false;
        });
    },
    getList (data) {
      const root = { name: "root", children: [], _children: [] };
      // 将每一项添加到树中
      data.forEach((item) => {
        let currentNode = root;
        const limitLength = Object.values(item).filter((pre) => pre).length;
        const keysLisy = Object.keys(item);
        const finalNum = Object.values(item)[limitLength - 1];
        for (let i = 1; i <= limitLength - 1; i++) {
          let key = "a" + i;
          let value = item[key];
          // 查找当前层级是否已存在节点
          let childNode = currentNode.children.find(function (child) {
            return child.name === value;
          });
          // 如果不存在，创建新节点并添加到当前层级
          if (!childNode) {
            childNode = { name: value, children: [], key: keysLisy[i - 1] };
            currentNode.children.push(childNode);
          }
          currentNode = childNode;
        }
        // console.log(currentNode, 'currentNode');
        // 添加最后一级的值作为倒数第二级的参数 num
        currentNode.ratio = finalNum;
      });
      // this.removeEmptyNodes(root);
      const finalObj = {
        companyName: this.dropName,
        r: root,
      };
      console.log(JSON.parse(JSON.stringify(finalObj)), "root");
      return finalObj;
    },
    // 实时搜索
    getQueryMainPageSeachItem1 (time) {
      //当查询条件为空时 重新查询
      if (!this.searchKey) {
        this.inputList = [];
        this.path = "";
        let params = {};
        params = {
          lx: this.dropName,
          gsmc: this.searchKey,
          labs: this.labs,
          pageNum: 0,
          pageSize: 200,
        };
        this.path = `<span style="color: yellow">${this.dropName}</span>`;
        this.paramsList = params;
        getListBy(params).then((res) => {
          this.bankList = res.rows;
        });
        return;
      }
      queryMainPageSeachItem({
        searchKey: this.searchKey,
        lx: this.dropName,
      }).then((res) => {
        if (res.code == 200) {
          if (time === this.timeInput) {
            if (!res.data.mhList || res.data.mhList.length === 0) {
              this.inputList = [];
              return;
            } else if (res.data.mhList.length > 10) {
              this.inputList = res.data.mhList.slice(0, 10);
            } else {
              this.inputList = res.data.mhList;
            }
            // this.inputList = res.data.mhList.slice(0, 10)
          }
        }
        console.log(this.inputList, "this.inputList");
      });
    },
    searchEvent () {
      this.getInputList((this.timeInput = new Date().getTime()), 500);
    },
    // 防抖
    debounce (fn, wait) {
      let timer = null;
      return function (...args) {
        if (timer) {
          clearTimeout(timer);
          timer = null;
        }
        timer = setTimeout(function () {
          fn.apply(this, args);
        }, wait);
      };
    },
    clearTimer () {
      if (this.timer) {
        clearTimeout(this.timer);
      }
    },
    closeDrop () {
      setTimeout(() => {
        this.inputList = [];
      }, 500);
    },
    uuid () {
      function s4 () {
        return Math.floor((1 + Math.random()) * 0x10000)
          .toString(16)
          .substring(1);
      }
      return (
        s4() +
        s4() +
        "-" +
        s4() +
        "-" +
        s4() +
        "-" +
        s4() +
        "-" +
        s4() +
        s4() +
        s4()
      );
    },
    //初始化
    initInfo (data) {
      const margin = { top: 0, right: 0, bottom: 0, left: 0 };
      let treeWidth = d3.select("#treeRoot")._parents[0].clientWidth;
      let treeHeight = d3.select("#treeRoot")._parents[0].clientHeight;
      // const treeWidth = document.body.clientWidth - margin.left - margin.right; //tree容器宽
      // const treeHeight = document.body.clientHeight - margin.top - margin.bottom; //tree容器高
      const centralY = 120 + margin.left;
      const centralX = treeHeight / 2 + margin.top;
      this.centralPoint = [centralX, centralY]; //中心点坐标

      //根节点字符所占宽度
      this.rootNodeLength = this.companyName[0].length * this.fontSize + 60;

      //svg标签
      svg = d3
        .select("#treeRoot")
        .append("svg")
        .attr("class", "tree-svg")
        .attr("xmlns", "http://www.w3.org/2000/svg")
        .attr("width", treeWidth)
        .attr("height", treeHeight)
        .attr("font-size", 26)
        .attr("fill", "#555");

      //g标签
      this.container = svg
        .append("g")
        .attr("class", "container1")
        .attr(
          "transform",
          "translate(" + margin1.left + "," + margin1.top + ")scale(0.8)"
        );

      //画出根节点
      this.drawRoot();
      //指定缩放范围
      const zoom = d3
        .zoom()
        .scaleExtent(this.scaleRange)
        .on("zoom", this.zoomFn);
      //动画持续时间
      this.container
        .transition()
        .duration(this.duration)
        .call(zoom.transform, d3.zoomIdentity);
      svg.call(zoom);
      //数据处理
      // console.log(data, "数据处理");
      this.dealData(data);
    },

    zoomFn () {
      var weizhi = document.getElementsByClassName("container1")[0];
      if (weizhi) {
        weizhi.style.transform = ""; //偏移位置
      }
      let zoom = d3.event.transform;
      return this.container.attr(
        "transform",
        "translate(" +
        (Number(zoom.x) + Number(margin1.left)) +
        "," +
        (zoom.y + margin1.top) +
        ")scale(" +
        zoom.k * 0.8 +
        ")"
      );
    },
    //数据重组
    DataReor (d, direction, source, appendData) {
      var setDepth = function (node, num, appendLeaf) {
        //重新设置depth
        node.depth = num;
        if (node.children && node.children.length) {
          //遍历children
          node.children.forEach(function (item) {
            setDepth(item, num + 1, appendLeaf);
          });
        } else {
          appendLeaf.push(node);
        }
      };

      var setHeight = function (arr, num) {
        //重新设置height
        var parent = [];
        arr.forEach(function (node) {
          node.height = Math.max(num, node.height);
          if (node.parent && parent.indexOf(node.parent) == -1) {
            parent.push(node.parent);
          }
        });

        if (parent.length) {
          setHeight(parent, num + 1);
        }
      };

      var appendLeaf = []; //增加的叶子节点

      if (appendData.children.length) {
        d.children = [];
        appendData.children.forEach(function (item, index) {
          var newNode = d3.hierarchy(item);
          newNode.parent = d;
          newNode.height = -1;
          setDepth(newNode, d.depth + 1, appendLeaf);
          d.children.push(newNode);
        });
      }

      if (appendLeaf.length) {
        setHeight(appendLeaf, 0);
      }

      if (source.data.name == "更多") {
        source.parent.descendants().forEach((d) => {
          d._children = d.children;
          d.id = direction + this.uuid();
        });
      } else {
        source.descendants().forEach((d) => {
          d._children = d.children;
          d.id = direction + this.uuid();
        });
      }
      this.update(d, direction);
    },
    // getNode(d, direction, source, type) {
    //   let mynodes;
    //   // 注释ly---start
    //   // if (!d.data.isNextNode && d.data.type != -1) {
    //   //   return;
    //   // }
    //   // 注释ly---end
    //   // console.log("重组数据");
    //   if (d.data.name == '更多') {
    //     var num = d.data.val / 5;
    //     if (num <= 5) {
    //       var arr = d.data.childrend;
    //     } else {
    //       var arr = d.data.childrend.slice(0, d.parent.children.length + 4);
    //       arr[d.parent.children.length + 4] = {
    //         nodeName: '更多',
    //         type: -1,
    //         val: d.data.childrend.length - d.parent.children.length + 4,
    //         childrend: d.data.childrend
    //       };
    //     }
    //     var appendData = {
    //       children: arr
    //     };
    //     this.DataReor(d.parent, direction, source, appendData);
    //   } else if (type == 1) {
    //     var appendData = {
    //       children: []
    //     };
    //     this.DataReor(d, direction, source, appendData);
    //   } else {
    //     //请求数据
    //     // console.log(d.data, "请求数据参数 update");
    //     $('#loading,.shaow').show();
    //     let data = [];
    //     $('#loading,.shaow').hide();
    //     if (data.length == 0) {
    //       html =
    //         '<div class="tk"><p style="font-size: 14px;color: #359ffb">' +
    //         d.data.name +
    //         '</p><span>暂无数据</span></div>';
    //       $('.shaow').show();
    //       $('body').append(html);
    //       return;
    //     }
    //     mynodes = data;
    //     if (data.length > 10) {
    //       data = data.slice(0, 10);
    //       data[11] = {
    //         name: '更多',
    //         type: -1,
    //         val: mynodes.length - 10,
    //         childrend: mynodes.slice(0, mynodes.length)
    //       };
    //     }
    //     var appendData = {
    //       children: data
    //     };
    //     this.DataReor(d, direction, source, appendData);
    //   }
    // },
    //数据处理
    dealData (data) {
      this.direction.forEach((item) => {
        this.root[item] = d3.hierarchy(data[item]);
        this.root[item].x0 = this.centralPoint[0]; //根节点x坐标
        this.root[item].y0 = this.centralPoint[1]; //根节点Y坐标
        this.porData(this.root[item], item);
      });
    },
    //遍历
    porData (obj, item) {
      obj.descendants().forEach((d) => {
        d._children = d.children;
        d.id = item + this.uuid();
      });
      this.update(obj, item);
    },
    //中心点配置
    drawRoot () {
      const _this = this;
      const title = this.container
        .append("g")
        .attr("id", "rootTitle")
        .attr(
          "transform",
          `translate(${this.centralPoint[1]},${this.centralPoint[0]})`
        )
        .on("click", function (d) {
          _this.getRightDetails(d);
        });
      title
        .append("svg:rect")
        .attr("class", "rootTitle")
        .attr("y", 0)
        .attr("x", -this.rootNodeLength / 2)
        .attr("width", this.rootNodeLength)
        .attr("height", 0)
        .attr("rx", 5) //圆角
        .style("fill", this.themeColor);
      // 中心点配置
      this.companyName.forEach((name, index) => {
        title
          .append("text")
          .attr("fill", "white")
          .attr("shape-rendering", "crispEdges")
          .attr("y", function () {
            return 5;
          })
          .attr("text-anchor", "middle")
          .style("font-size", function () {
            if (index == 1) {
              return "10px";
            } else {
              return "22px";
            }
          })
          .style("font-weight", "bold")
          .text(name);

        let lineHeight = 50;
        d3.select("#rootTitle rect").attr("height", lineHeight).attr("y", -28);
      });
    },
    seat (newArr, dirRight, data) {
      for (var j = 0; j < newArr.length; j++) {
        if (j != 0) {
          for (var i = 0; i < data[j].length; i++) {
            data[j][i].y = data[j - 1][0].y + newArr[j - 1] - 40;
          }
        }
      }
    },
    testLength (data, dirRight) {
      var level = [],
        width1,
        width2;

      for (var i = 0; i < data.length; i++) {
        var newArr = new Array();

        for (var j = 0; j < data[i].length; j++) {
          if (data[i][j].data.attName) {
            svg
              .append("text")
              .style("font-size", this.fontSize)
              .text((d) => "(" + data[i][j].data.attName + ")")
              .attr("class", "test")
              .attr("width", function (d) {
                width3 = d3.select(this.getComputedTextLength())._groups[0][0];
                // console.log(width3, "width3");
              });
          }
          if (data[i][j].data.ratio) {
            svg
              .append("text")
              .style("font-size", this.fontSize)
              .text(function (d) {
                const len = data[i][j].data.name.length;
                if (len > 20) {
                  return data[i][j].data.name.substring(0, 20) + "...";
                } else {
                  return data[i][j].data.name;
                }
              })
              .attr("class", "test")
              .attr("width", function (d) {
                width1 = d3.select(this.getComputedTextLength())._groups[0][0];
              });
            svg
              .append("text")
              .style("font-size", this.fontSize)
              .text((d) => data[i][j].data.ratio)
              .attr("class", "test")
              .attr("width", function (d) {
                width2 = d3.select(this.getComputedTextLength())._groups[0][0];
              });

            $(".test").remove();
            if (data[i][j].data.attName) {
              if (Number(width1) + Number(width3) > Number(width2)) {
                newArr.push(Number(width1) + Number(width3) + 100);
              } else {
                newArr.push(Number(width2) + 100);
              }
            } else {
              // 点击展开的x轴线长度设置
              if (Number(width1) > Number(width2)) {
                newArr.push(Number(width1) + 200);
              } else {
                newArr.push(Number(width2) + 300);
              }
            }
          } else {
            svg
              .append("text")
              .style("font-size", this.fontSize)
              .text(function (d) {
                if (data[i][j].data.name) {
                  const len = data[i][j].data.name.length;
                  if (len > 20) {
                    return data[i][j].data.name.substring(0, 20) + "...";
                  } else {
                    return data[i][j].data.name;
                  }
                }
              })
              .attr("class", "test")
              .attr("width", function (d) {
                width1 = d3.select(this.getComputedTextLength())._groups[0];
                // 调整线的长度间距
                newArr.push(Number(width1) + 200);
                data.width1 = d3.select(
                  this.getComputedTextLength()
                )._groups[0];
              });
            $(".test").remove();
          }
        }
        level.push(Math.max.apply(null, newArr));
      }

      this.seat(level, dirRight, data);
    },

    //开始绘图
    update (source, direction) {
      console.log("开始绘图");
      // console.log(source, direction, "update");
      let that = this;
      dirRight = direction === "r" ? 1 : -1; //方向为右/左
      forUpward = direction == "r";
      let className = `${direction}gNode`;
      let tree = this.treeMap(this.root[direction]);
      let nodes = tree.descendants();
      let links = tree.links();
      var data = [];
      if (nodes.length > 1) {
        for (var i = 0; i < nodes.length; i++) {
          if (!data[nodes[i].depth]) {
            var arr = [];
            arr.push(nodes[i]);
            data[nodes[i].depth] = arr;
          } else {
            data[nodes[i].depth].push(nodes[i]);
          }
        }
        //检测最大长度
        this.testLength(data, dirRight);
      }
      nodes.forEach((d) => {
        d.y = dirRight * (d.y + this.rootNodeLength / 2) + this.centralPoint[1];
        d.x = d.x + this.centralPoint[0];
      });

      //根据class名称获取左或者右的g节点，达到分块更新
      const node = this.container
        .selectAll(`g.${className}`)
        .data(nodes, (d) => d.id);
      //新增节点，tree会根据数据内的children扩展相关节点
      const _this = this;
      const nodeEnter = node
        .enter()
        .append("g")
        .attr("id", (d) => `g${d.id}`)
        .attr("class", className)
        .attr("transform", (d) => `translate(${source.y0},${source.x0})`)
        .attr("fill-opacity", 0)
        .attr("stroke-opacity", 0)
        .on("click", function (d) {
          _this.selectWidth = d.id;
          // console.log('选中了', d.data);
          _this.getRightDetails(d.data);
          d3.select(this)
            .selectAll(".node-circle .node-circle-vertical")
            .transition()
            .duration(that.duration)
            .attr("stroke-width", function (d) {
              if (d.children) {
                return 1;
              } else {
                return 0;
              }
            });

          if (d.data.name == "更多") {
            return that.clickNode(d, direction, source);
          } else if (d.depth !== 0) {
            return that.clickNode(d, direction, source);
          }
        });
      nodeEnter.each((d) => {
        if (d.depth > 0) {
          this.drawText(`g${d.id}`, dirRight);
          if (d.data.attName) {
            this.drawCodeText(`g${d.id}`, dirRight);
          }
          if (d.data.ratio) {
            this.drawTsText(`g${d.id}`, dirRight);
          }

          this.drawRect(`g${d.id}`, dirRight);
          this.marker(`g${d.id}`, dirRight);
        }

        if (d.depth > 0) {
          let width = d.data.name
            ? Math.min(d.data.name.length * 14, this.rectMinWidth)
            : 0;
          let right = dirRight > 0;
          let xDistance = right ? width : -width;
          this.drawCircle(`g${d.id}`, dirRight, source, direction);
          this.drawSign(`g${d.id}`, dirRight); //画标记
        }

        //画节点数量
        // console.log(d, "画节点数量");
        if (d.data && d.data.type == -1) {
          this.drawLength(`g${d.id}`, dirRight);
        }
      });

      // 更新节点：节点enter和exit时都会触发tree更新
      const nodeUpdate = node
        .merge(nodeEnter)
        .transition()
        .duration(this.duration)
        .attr("transform", function (d) {
          if (d.data && d.data.isNextNode) {
            d3.select(this)
              .selectAll(".node-circle .node-circle-vertical")
              .transition()
              .duration(this.duration)
              .attr("stroke-width", function (d) {
                if (d.children) {
                  return 0;
                } else {
                  return 1;
                }
              });
          }

          var index = 0;

          return "translate(" + d.y + "," + d.x + ")";
        })
        .attr("fill-opacity", 1)
        .attr("stroke-opacity", 1);

      // 移除节点:tree移除掉数据内不包含的节点(即，children = false)
      const nodeExit = node
        .exit()
        .transition()
        .duration(this.duration)
        .remove()
        .attr("transform", (d) => `translate(${source.y},${source.x})`)
        .attr("fill-opacity", 0)
        .attr("stroke-opacity", 0);

      // Update the links 根据 className来实现分块更新
      const link = this.container
        .selectAll(`path.${className}`)
        .data(links, (d) => d.target.id);

      // Enter any new links at the parent's previous position.
      //insert是在g标签前面插入，防止连接线挡住G节点内容
      const linkEnter = link
        .enter()
        .insert("path", "g")
        .attr("class", className)
        .attr("d", (d) => {
          const o = { x: source.x0, y: source.y0 };
          return this.diagonal({ source: o, target: o });
        })
        .attr("fill", "none")
        .attr("stroke-width", 2)
        .attr("stroke", "#D8D8D8");

      // Transition links to their new position.
      link
        .merge(linkEnter)
        .transition()
        .duration(this.duration)
        .attr("d", this.diagonal);

      // Transition exiting nodes to the parent's new position.
      link
        .exit()
        .transition()
        .duration(this.duration)
        .remove()
        .attr("d", (d) => {
          const o = { x: source.x, y: source.y };
          return this.diagonal({ source: o, target: o });
        });

      // Stash the old positions for transition.
      this.root[direction].eachBefore((d) => {
        d.x0 = d.x;
        d.y0 = d.y;
      });
    },
    /**
     * 如果出现闪烁的白线可能是矩形的边与线重合了，扩大距离即可解决
     */
    diagonal ({ source, target }) {
      // let s = source,
      //   d = target;
      // if (forUpward) {
      //   return `
      //     M ${s.y}, ${s.x}
      //     C ${(s.y + d.y - 102) / 2}, ${s.x},
      //       ${(s.y + d.y - 102) / 2}, ${d.x},
      //       ${d.y}, ${d.x}
      //   `;
      // } else {
      //   return `
      //     M ${s.y}, ${s.x}
      //     C ${(s.y + d.y + 102) / 2}, ${s.x},
      //       ${(s.y + d.y + 102) / 2}, ${d.x},
      //       ${d.y}, ${d.x}
      //   `;
      // }

      // 获取此时节点的矩形宽度
      const jxId = `g${source.id}`;
      // console.log(jxId, '节点处的矩形');
      // console.log(this.selectWidth, 'this.selectWidth');
      const rectWidth = source.id
        ? document.getElementById(`g${source.id}`)
          ? document.getElementById(`g${source.id}`).getBBox().width - 15
          : 15
        : 15;
      // const rectWidth = 10;
      const rectHeight = 0;
      let s = source,
        d = target;
      // 计算起始点坐标
      let startX = s.y + rectWidth; // 假设矩形的宽度为 rectWidth
      let startY = s.x + rectHeight / 2; // 假设矩形的高度为 rectHeight

      // 计算终点坐标
      let endX = d.y;
      let endY = d.x + rectHeight / 2;

      if (forUpward) {
        return `
          M ${startX}, ${startY}
          C ${(startX + endX - 102) / 2}, ${startY},
            ${(startX + endX - 102) / 2}, ${endY},
            ${endX}, ${endY}
        `;
      } else {
        return `
          M ${startX}, ${startY}
          C ${(startX + endX + 102) / 2}, ${startY},
            ${(startX + endX + 102) / 2}, ${endY},
            ${endX}, ${endY}
        `;
      }
    },

    //画箭头
    marker (id, dirRight) {
      let gMark = d3
        .select(`#${id}`)
        .append("g")
        .attr(
          "transform",
          dirRight > 0 ? "translate(-20,0)" : "translate(12,0)"
        );
      return gMark
        .insert("path", "text")

        .attr("d", function (d) {
          if (d.data.nodeType == 0 && dirRight > 0) {
            return "M0,0L0,3L9,0L0,-3Z";
          } else if (d.data.nodeType == 0 && dirRight < 0) {
            return "M0,0L9,-3L9,3Z";
          }
        })
        .style("fill", (d) => this.getRectStorke(d.data.name));
    },

    //华标记
    drawSign (id, dirRight) {
      return d3
        .select(`#${id}`)
        .insert("circle", "text")
        .attr("cx", dirRight > 0 ? -5 : 5)
        .attr("y", -2.5)
        .attr("r", function (d) {
          if (d.data.nodeType == 0) {
            return 4;
          }
        })
        .style("fill", (d) => this.getRectStorke(d.data.name));
    },
    //画文本
    drawText (id, dirRight) {
      let that = this;
      dirRight = dirRight > 0; //右为1，左为-1
      return d3
        .select(`#${id}`)
        .append("text")
        .attr("y", function (d) {
          // if (d.data.ratio) {
          //   return that.textPadding - 8;
          // } else {
          return that.textPadding;
          // }
        })
        .attr("x", (d) => (dirRight ? that.textPadding : -that.textPadding))
        .attr("text-anchor", dirRight ? "start" : "end")
        .style("font-size", that.fontSize)
        .text(function (d) {
          const len = d.data.name ? d.data.name.length : "";
          if (len > 20) {
            return d.data.name.substring(0, 20) + "...";
          } else {
            return d.data.name || "";
          }
        })
        .attr("fill", function (d) {
          if (d.data.nodeType == -1) {
            return "rgb(33, 150, 243)";
          } else if (d.data.nodeType == 0 || d.data.attName) {
            return "#000";
          } else {
            return "#fff";
          }
        })

        .attr("width", function (d) {
          circlewidth1 = d3.select(this.getComputedTextLength())._groups[0][0];
          return d3.select(this.getComputedTextLength())._groups[0][0];
        });
    },
    //画子文本
    drawTsText (id, dirRight) {
      let that = this;
      return (
        d3
          .select(`#${id} text`)
          .append("tspan")
          .attr("fill", (d) => (d.data.attName ? "#fff" : "#57BEBC"))
          // .attr("y", function (d) {
          //   if (d.data.ratio) {
          //     return that.textPadding + 8;
          //   }
          // })
          // .attr("x", function (d) {
          //   if (dirRight > 0) {
          //     return that.textPadding;
          //   } else {
          //     return -15;
          //   }
          // })
          // .attr("stroke-width", (d) =>
          //   0.5
          // )
          .style("font-size", "18px")
          .text(function (d) {
            return `(${d.data.ratio})`;
          })

          .attr("width", function (d) {
            circlewidth2 = d3.select(this.getComputedTextLength())
              ._groups[0][0];
            return d3.select(this.getComputedTextLength())._groups[0][0];
          })
      );
    },
    //画股票代码
    drawCodeText (id, dirRight) {
      return d3
        .select(`#${id} text`)
        .append("tspan")
        .attr("fill", (d) => "#fff")
        .attr("y", function (d) {
          if (d.data.ratio) {
            return this.textPadding + 8;
          }
        })
        .style("font-size", "11px")
        .attr("x", function (d) {
          if (dirRight > 0) {
            return this.textPadding;
          } else {
            return -5;
          }
        })
        .text(function (d) {
          return d.data.attName + " ";
        })

        .attr("width", function (d) {
          circlewidth3 = d3.select(this.getComputedTextLength())._groups[0][0];
          return d3.select(this.getComputedTextLength())._groups[0][0];
        });
    },
    //节点数量
    drawLength (id) {
      return d3
        .select(`#${id} text`)
        .append("tspan")
        .attr("fill", (d) => "#999")
        .text(function (d) {
          if (d.data.type == -1) {
            return " (" + d.data.val + ")";
          }
          return " [" + d.data.ratio + "]";
        })
        .attr("fill", "rgb(33, 150, 243)")
        .attr("width", function (d) {
          return d3.select(this.getComputedTextLength())._groups[0];
        });
    },
    //画方框阴影
    drawFilter (id) {
      return d3
        .select(`#${id}`)
        .insert("defs", "rect")
        .append("filter")
        .attr("id", `f${id}`)
        .attr("x", 0)
        .attr("y", 0)
        .append("feGaussianBlur")
        .attr("in", "SourceGraphic")
        .attr("stdDeviation", "5");
    },

    //画方框
    drawRect (id, dirRight) {
      // console.log(id, 'id');
      let that = this;
      let realw = document.getElementById(id).getBBox().width + 25; //获取g实际宽度后，设置rect宽度
      if (document.getElementById(id).getBBox().width > 400) {
        realw = 400;
      }

      return d3
        .select(`#${id}`)
        .insert("rect", "text")
        .attr("x", function (d) {
          if (dirRight < 0) {
            return -realw;
          } else {
            0;
          }
        })
        .attr("y", function (d) {
          // if (d.data.ratio) {
          //   return -that.textSpace + that.textPadding - 11;
          // } else {
          return -that.textSpace + that.textPadding - 4;
          // }
        })
        .attr("width", function (d) {
          if (d.data.ratio) {
            //判断是否有下级节点
            return realw - 10;
          } else {
            return realw;
          }
        })
        .attr("height", function (d) {
          // if (d.data.ratio) {
          //   return that.textSpace + that.textPadding + 22;
          // } else {
          return that.textSpace + that.textPadding + 8;
          // }
        })
        .attr("stroke-width", (d) =>
          d.data.nodeType == 0 || d.data.type == -1 || d.data.attName ? 2 : 2
        )
        .attr("rx", 2) //圆角

        .style("stroke", (d) =>
          d.data.nodeType == -1 ? "" : that.getRectStorke(d.parent.data.name)
        )
        .style("fill", function (d) {
          if (d.data.nodeType == -1) {
            return "RGBA(12, 31, 122, 1)";
          } else if (d.data.nodeType == 0) {
            return that.getRectStorke(d.data.name);
          } else if (d.data.attName) {
            return "RGBA(12, 31, 122, 1)";
          } else {
            return "RGBA(12, 31, 122, 0.5)";
          }
        });
    },

    //画circle
    drawCircle (id, dirRight, source, direction) {
      let gMark = d3
        .select(`#${id}`)
        .append("g")
        .attr("class", "node-circle")
        .attr("stroke", "rgb(153, 153, 153)")
        .attr("transform", function (d) {
          if (d.data.ratio) {
            // if (circlewidth1 > circlewidth2) {
            //   leng = Number(circlewidth1) + 15;
            // } else {
            //   leng = Number(circlewidth2) + 15;
            // }

            leng = Number(circlewidth1) + Number(circlewidth2) + 16;
            // if (leng > 390) {
            //   leng = 390;
            // }
            if (dirRight == 1) {
              return "translate(" + leng + ",0)";
            } else {
              return "translate(" + -leng + ",0)";
            }
          } else {
            leng = Number(circlewidth1) + 15;
            if (dirRight == 1) {
              return "translate(" + leng + ",0)";
            } else {
              return "translate(" + -leng + ",0)";
            }
          }
        })
        // .attr('stroke-width', d => d.data.isNextNode ? 1 : 0);   判断是否有下级节点
        .attr("stroke-width", (d) => (d.data.ratio ? 0 : 1));
      gMark
        .append("circle")
        .attr("fill", "none")
        .attr("r", function (d) {
          if (d.data.ratio) {
            return 0;
          }
          return 5;
        }) //根节点不设置圆圈
        .attr("fill", "#ffffff");
      let padding = this.circleR - 2;

      gMark.append("path").attr("d", `m -${padding} 0 l ${2 * padding} 0`); //横线

      gMark
        .append("path") //竖线，根据展开/收缩动态控制显示
        .attr("d", `m 0 -${padding} l 0 ${2 * padding}`)
        .attr("stroke-width", function (d) {
          if (d.data.ratio) {
            return 0;
          }
          return 1;
        })
        .attr("class", "node-circle-vertical");
      return gMark;
    },

    //点击某个节点
    // clickNode(d, direction, source) {
    //   if (d.children) {
    //     d._children = d.children;
    //     d.children = null;
    //     this.getNode(d, direction, source, 1);
    //   } else {
    //     d.children = d._children;
    //     d._children = [];
    //     this.getNode(d, direction, source); //原注
    //   }
    //   if (d.data.name == "更多") {
    //     this.getNode(d, direction, source);
    //     return;
    //   }
    //   this.update(d, direction); //原注
    // },

    async expand (d, direction, source) {
      // debugger
      // if (d.data.name == '更多') {
      //   this.getNode(d, direction, source);
      //   return;
      // }
      // 拼接展示的数据
      if (d._children) {
        d.children = d._children;
        d._children = null;
        this.update(d, direction);
      } else {
        // // 接口获取数据
        // const params = {
        //   code: d.data.id
        // };
        // let resInfo = null;
        // // type为1表示以公司为中心，type为2表示以人为中心，
        // if (d.data.type === '1') {
        //   resInfo = await findCompanyChildrenAtlas(params);
        // } else {
        //   resInfo = await findChildrenAtlas(params);
        // }
        // console.log(resInfo, '展开res');
        // if (resInfo.data) {
        //   const appendData = {
        //     children: resInfo.data
        //   };
        //   this.DataReor(d, direction, source, appendData);
        // }
      }
    },

    collapse (d, direction, obj) {
      if (d.children) {
        d._children = d.children;
        d.children = null;
        // console.log(d._children, '_children');
      }
      if (obj == 1) {
        this.update(d, direction);
      }
    },

    //点击某个节点ly
    clickNode (d, direction, source) {
      // 点击了某个节点
      if (d.children || d.children) {
        this.collapse(d, direction, 1);
      } else {
        this.expand(d, direction, source);
      }
    },
    getTsTextColor (name) {
      switch (name) {
        case "股东":
          return "darkgray";
        case "供应商":
          return "#FF9800";
        case "合伙人":
          return "green";
        default:
          return "black";
      }
    },
    //末 节点 边框颜色
    getRectStorke (name) {
      switch (name) {
        case "分支机构":
          return "rgb(255, 234, 218)";
        case "对外投资":
          return "rgb(215, 236, 255)";
        case "股东":
          return "rgb(211, 234, 241)";
        case "高管":
          return "rgb(237, 227, 244)";
        default:
          return "rgb(133, 165, 255)";
      }
    },
    isNull (val) {
      return val ? val : "";
    },
    inputSearch (item) {
      // console.log(item, 'item');
      // '1'代表产业，'2'代表公司
      const type = item.type;
      // 处理path
      const list = item.value.split("->");
      const checkOne = list.pop();
      const specialOne = `<span style="color: yellow">${checkOne}</span>`;
      this.path = list.join("->") + "->" + specialOne;
      const jumpTitle = list[0];
      this.jumpTitle = jumpTitle;
      this.activeTitle = "产业图谱";
      const keyObj = {
        1: "cpcc",
        2: "cpmc",
        3: "cpxf",
      };
      let params = {
        params: {
          lx: jumpTitle,
          gsmc: type === "1" ? "" : item.key,
        },
        path: this.path,
      };
      params.params[keyObj[list.length]] = checkOne;
      this.toggle(params, false);
    },
    // 点击树状图查询
    async getRightDetails (item = "") {
      let params = {};
      console.log(item, "item3333");
      if (item) {
        const findOne = this.oriList.find((pre) => pre[item.key] === item.name);
        const selectOne = `<span style="color: yellow">${item.name}</span>`;
        switch (item.key) {
          case "a1":
            this.path = `${this.dropName}->${selectOne}`;
            this.branchCheck = {
              lvl: "L1",
              cpcc: item.name,
              name: item.name,
            };
            break;
          case "a2":
            this.path = `${this.dropName}->${findOne.a1}->${selectOne}`;
            this.branchCheck = {
              lvl: "L2",
              cpmc: item.name,
              name: item.name,
            };
            break;
          case "a3":
            this.path = `${this.dropName}->${findOne.a1}->${findOne.a2}->${selectOne}`;
            this.branchCheck = {
              lvl: "L3",
              cpxf: item.name,
              name: item.name,
            };

            break;
          default:
            break;
        }
        console.log(findOne, "findOne");
        params = {
          lx: this.dropName,
          labs: this.labs,
          gsmc: this.searchKey,
          pageNum: 0,
          pageSize: 200,
        };
        const keys = {
          a1: "cpcc",
          a2: "cpmc",
          a3: "cpxf",
        };
        this.keyName = keys[item.key];
        this.typeName = item.name;
        if (item) {
          params[keys[item.key]] = item.name;
        }

        console.log(params, "params");
      } else {
        params = {
          lx: this.dropName,
          gsmc: this.searchKey,
          labs: this.labs,
          pageNum: 0,
          pageSize: 200,
        };
        this.path = `<span style="color: yellow">${this.dropName}</span>`;
      }
      this.paramsList = params;
      getListBy(params).then((res) => {
        this.bankList = res.rows;
      });
    },
    // 点击旭日图查询
    async sunSearch (item) {
      console.log(item, "item");
      const selectOne = `<span style="color: yellow">${item.data.path
        .split("->")
        .pop()}</span>`;
      const list = item.data.path.split("->");
      list.pop();
      list.push(selectOne);
      this.path = list.join("->");
      let params = {
        labs: this.labs,
      };
      const type = list.length;
      switch (type) {
        case 1:
          params = {
            lx: this.dropName,
          };
          break;
        case 2:
          params = {
            lx: this.dropName,
            cpcc: item.data.name,
          };
          break;
        case 3:
          params = {
            lx: this.dropName,
            cpmc: item.data.name,
          };
          break;
        case 4:
          params = {
            lx: this.dropName,
            cpxf: item.data.name,
          };
          break;
        default:
          break;
      }
      params.gsmc = this.searchKey;
      this.paramsList = params;
      // 顶部6个部分
      queryLabCountForRS(params).then((res) => {
        console.log(res, "queryLabCountForRS");
        if (res.data) {
          this.sunTanList.forEach((pre) => {
            pre.value = res.data[pre.key];
          });
        }
        console.log(this.sunTanList, "123232132321");
      });
      // 获取企业列表
      getListBy({
        ...params,
        pageNum: 0,
        pageSize: 200,
      }).then((res) => {
        this.bankList = res.rows;
      });
    },
    // 多选
    goTagMul (item) {
      const timer = new Date().getTime();
      this.timer = timer;
      this.labs = item;
      const params = {
        ...this.paramsList,
        labs: item,
        lx: this.dropName,
        gsmc: this.searchKey,
        pageNum: 0,
        pageSize: 200,
      };
      getListBy(params).then((res) => {
        if (timer === this.timer) {
          this.bankList = res.rows;
        }
      });
      this.screenSwitch(false);
    },
    getUrlParam (name) {
      const queryStr = String(window.location).split("?")[1] || "";
      name = encodeURIComponent(name);
      let arr = new RegExp("(^|&)" + name + "=([^&]*)(&|$)").exec(queryStr);
      if (arr) {
        return RegExp.$2;
      } else {
        return "";
      }
    },
  },
};
</script>
<style lang="scss" scoped>
.tree04 {
  display: flex;
  color: white;
  position: relative;

  .go-area {
    position: relative;
    cursor: pointer;

    &::after {
      content: "";
      position: absolute;
      top: 50%;
      right: -20px;
      transform: translateY(-50%);
      width: 0;
      height: 0;
      border-style: solid;
      border-width: 8px 0 8px 8px;
      border-color: transparent transparent transparent #fff;
    }
  }

  .right-tupu {
    cursor: pointer;
    margin-left: auto;

    img {
      width: 55px;
      height: 55px;
    }
  }
}

.left_box {
  position: relative;
  width: 55%;
  height: calc(100vh - 200px);
  // margin-top: 30px;
  box-shadow: 0 0 4px #83b4c8;
  margin-left: 20px;
  padding: 8px 0px;
  overflow: hidden;

  .search {
    height: 40px;
    margin: 0 120px 0 50px;
    position: relative;
    // border: 1px solid red;

    .icon {
      width: 22px;
      height: 22px;
      position: absolute;
      left: 20px;
      top: 10px;
    }

    .serach_input {
      width: 100%;
      height: 40px;
      background: #143f8e;
      border-radius: 46px;
      border: none;
      padding-left: 60px;
      color: #fff;
      font-size: 16px;
    }

    .options {
      width: 680px;
      height: 10px auto;
      background-color: #fff;
      margin: 0 0 0 50px;
      border-radius: 5px;
      padding-top: 10px;
      padding-left: 0;
      padding-right: 0;
      padding-bottom: 10px;
      position: absolute;
      z-index: 999;

      .options_item {
        height: 32px;
        margin: 0;
        list-style: none;
        line-height: 32px;
        padding: 0 10px;
        color: #000000;
        cursor: pointer;

        .title_type {
          font-size: 12px;

          // width: 120px;
          // border: 1px solid red
        }

        .text_type {
          width: 350px;
          font-size: 12px;
          text-align: right;
          float: right;
          overflow: hidden;
          white-space: nowrap;
          text-overflow: ellipsis;
          -o-text-overflow: ellipsis;
        }
      }

      .options_item:hover {
        background-color: #f5f6f9;
        color: #4e71f2 !important;
      }
    }

    .btn {
      width: 84px;
      height: 42px;
      text-align: center;
      background: linear-gradient(0deg, #2981ee 0%, #135ccf 100%);
      border-radius: 61px 62px 61px 61px;
      line-height: 43px;
      font-size: 20px;
      font-family: Alibaba PuHuiTi;
      font-weight: 400;
      color: #d7f4ff;
      position: absolute;
      right: 2px;
      top: 2px;
      cursor: pointer;
    }
  }

  ::v-deep .el-input__inner {
    border: none !important;
    background-color: rgba(27, 45, 121, 1) !important;
    border-radius: 20px;
    color: #438ef5;
  }

  ::v-deep .el-icon-search:before {
    color: #438ef5;
  }
}

.title_box {
  position: relative;
  // left: 15px;
  // top: 10px;
  // width: 260px;
  // border: 1px solid red;
  height: 41px;
  // line-height: 41px;
  // padding-left: 20px;
  font-size: 25px;
  // background: repeating-linear-gradient(to left, transparent, #1170c9);
  font-family: YouSheBiaoTiHei;
  display: flex;
  align-items: center;
  justify-content: center;

  .has-select {
    flex: 1;
    text-align: center;
    font-size: 20px;
    // font-weight: bold;
    font-family: none;
    font-family: YouSheBiaoTiHei;
    // border: 1px solid red;
  }
}

.right-icon {
  position: absolute;
  right: 5px;
  top: 5px;
  cursor: pointer;

  img {
    width: 54px;
    height: 54px;
  }
}

// .seeTree-page {
//   width: 100%;
//   // height: 445px;
//   background-color: #1170c9;
//   // margin-top: 20px;
//   overflow: hidden;
// }

.right_box {
  flex: 1;
  height: calc(100vh - 200px);
  // height: 865px;
  // margin-top: 30px;
  box-shadow: 0 0 4px #83b4c8;
  overflow: auto;
  margin-left: 20px;
  padding: 20px 20px 2px 20px;
  position: relative;
}

.label {
  width: fit-content;
  padding: 0 10px;
  border-radius: 3px;
  margin-right: 10px;
  margin-bottom: 10px;
}

.right_label {
  width: 165px;
  height: 74px;
  text-align: center;
  overflow: hidden;
  margin-top: 10px;
  background: linear-gradient(-33deg, transparent, #19369b 100%);
  cursor: pointer;
}

.right_label2 {
  width: 165px;
  height: 74px;
  text-align: center;
  overflow: hidden;
  margin-top: 10px;
  background: linear-gradient(-33deg, transparent, #2653f8 100%);
}

.right_title {
  font-size: 17px;
  color: #68c8fa;
  margin-top: 5px;
}

.num {
  font-family: YouSheBiaoTiHei;
  font-size: 28px;
}

.jia_text {
  font-size: 15px;
  color: #68c8fa;
  margin-top: 5px;
}

.right_head_bottom {
  display: flex;
  align-items: center;
  justify-content: center;
}

.top_ss {
  // position: absolute;
  margin-left: auto;
  cursor: pointer;
  // right: 20px;
  // top: 20px;

  img {
    width: 20px;
    height: 20px;
  }
}

.right_head {
  // display: flex;
  // flex-wrap: wrap;
  // justify-content: space-between;
  // border: 1px solid red;
  width: 60%;
  height: 50px;
  background-image: url("~img/zyqj_title.png");
  background-size: 100% 100%;
  font-family: YouSheBiaoTiHei;
  font-weight: 400;
  font-size: 25px;
  line-height: 20px;
  padding-left: 70px;
}

.qylb_text {
  margin: 10px 7px 0 7px;
  display: flex;
  height: 40px;
  // border: 1px solid red;
  align-items: center;

  .sort_all {
    display: flex;
    align-items: center;
    height: 36px;
    margin-right: 40px;

    // border: 1px solid red;
    .sort_item {
      font-size: 18px;
      font-family: Source Han Sans SC;
      color: #3a7bb2;

      &.active {
        font-weight: 600;
        color: #68c8fa;
      }
    }

    .sort_sort_right {
      // display: inline-grid;
      margin-left: 6px;
      height: 26px;
      display: flex;
      align-items: center;
      justify-content: space-around;
      flex-direction: column;

      img {
        display: block;
        cursor: pointer;
        width: 12px;
        height: 6px;

        &:first-of-type {
          margin-top: 2px;
        }
      }
    }
  }

  .fenbu-qy {
    cursor: pointer;
    height: 33px;
    background: rgba(104, 200, 250, 0.08);
    border: 1px solid #68c8fa;
    border-radius: 3px;
    display: flex;
    align-items: center;
    font-size: 18px;
    font-family: Source Han Sans SC;
    font-weight: 400;
    color: #68c8fa;
    padding: 0 18px;

    img {
      width: 21px;
      height: 21px;
      margin-right: 6px;
    }
  }
}

.right_bottom_box {
  display: flex;
  margin-top: 20px;
  // width: 50%;
}

.short_name {
  width: 57px;
  height: 57px;
  text-align: center;
  font-size: 19px;
  line-height: 25px;
  padding-top: 5px;
  padding: 4px 2px;
  border-radius: 5px;
  margin-bottom: 15px;
  flex-shrink: 0;
}

.short_name2 {
  width: 57px;
  height: 57px;
  text-align: center;
  font-size: 19px;
  line-height: 50px;
  padding-top: 5px;
  padding: 4px 2px;
  border-radius: 5px;
  margin-bottom: 15px;
  flex-shrink: 0;
}

.short_name1 {
  background-color: #e4a657;
}

.short_name2 {
  background-color: #55926f;
}

.short_name3 {
  background-color: #ce6946;
}

.short_name4 {
  background-color: #3c8cf7;
}

.short_name5 {
  background-color: #e4a657;
}

.right_bottom_right {
  margin-left: 10px;
}

.qy_name {
  // width: 180px;

  font-size: 18px;
  overflow: hidden;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  -o-text-overflow: ellipsis;
}

.tag-qy {
  margin-top: 5px;
  color: #68c8fa;
  font-size: 16px;
  display: flex;
  flex-wrap: wrap;
}

.bq {
  color: #68c8fa;
  font-size: 16px;
  display: flex;
  flex-wrap: wrap;
}

.right_bottom {
  // display: flex;
  flex-wrap: wrap;
  // height: 580px;
}

.right_bottom::-webkit-scrollbar {
  width: 0px;
}

.score_box {
  margin-right: 10px;
  display: flex;
  margin-top: 10px;
}

.score_box_left {
  width: 85px;
  text-align: center;
  background-color: #d9eaf3;
  border-radius: 3px;
  height: fit-content;
  color: #000000;
  font-weight: bold;
}

.score_box_right {
  width: 50px;
  // height: fit-content;
  text-align: center;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-left: -5px;
  background-color: #008ae0;
  border-radius: 3px;
  color: #ffffff;
  font-weight: bold;
}

.bq_zs {
  font-size: 18px;
  color: #008ae0;
}

.bq_area {
  padding: 0 10px;
  text-align: center;
  background-color: #3dcaff;
  border-radius: 3px;
  height: -moz-fit-content;
  height: fit-content;
  color: #0b207b;
  font-weight: bold;
  margin-bottom: 10px;
  margin-right: 10px;
}

.bq_label {
  padding: 0 10px;
  text-align: center;
  background-color: #108cff;
  border-radius: 3px;
  height: -moz-fit-content;
  height: fit-content;
  color: #04134e;
  font-weight: bold;

  margin-bottom: 10px;
}

.right-sun-all {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-around;

  .right-sun-tab {
    height: 81px;
    padding-left: 13px;
    width: 30%;
    display: flex;
    align-items: center;
    background: linear-gradient(-33deg,
        rgba(82, 147, 247, 0.27) 0%,
        rgba(25, 54, 155, 0.27) 100%);
    margin-bottom: 10px;

    img {
      width: 51px;
      height: 51px;
    }

    .right-value {
      margin-left: 10px;
      height: 60px;
      font-size: 17px;
      font-family: Source Han Sans SC;
      font-weight: 500;
      color: #68c8fa;
      // border: 1px solid red;
      display: flex;
      flex-direction: column;
      justify-content: center;

      .right-value-bo {
        display: flex;
        align-items: center;

        >div:first-of-type {
          font-size: 28px;
          font-family: YouSheBiaoTiHei;
          font-weight: 400;
          color: #ffffff;
          margin-right: 5px;
        }
      }
    }
  }
}

.tree_branch {
  position: absolute;
  top: 26px;

  right: 26px;
  cursor: pointer;
  z-index: 999;
  color: #68c8fa;
}

.screen_button {
  width: 30px;
  height: 80px;
  text-align: center;
  line-height: 40px;
  background-color: #008ae0;
  position: absolute;
  right: 0;
  top: 200px;
  cursor: pointer;
}

.screen_pop_button {
  width: 30px;
  height: 80px;
  text-align: center;
  line-height: 40px;
  position: absolute;
  left: 0;
  top: 200px;
  background-color: #008ae0;
  cursor: pointer;
}

.screen_pop {
  width: 80%;
  height: 100%;
  right: 0;
  position: absolute;
  top: 0;
  background: #0e2f7a;
  opacity: 0.94;
  // padding: 30px;
  box-shadow: inset 0 0 5px 5px rgba(0, 110, 231, 0.5);
  z-index: 9999;
  overflow: hidden;
  padding: 30px;
  animation: fadenum 1s;
}

@keyframes fadenum {
  0% {
    transform: translateX(250px);
  }
}

// .fade-enter,.fade-leave-to{
//   opacity: 0;
//   // animation: fadenum 1s;
//   // transform: rotate(0deg);
// }
// .fade-enter-active,.fade-leave-active{
//   transition: opacity 3s;
// }
.screen_pop_box {
  width: 80%;
  margin: auto;
}

.boxhidden {
  overflow: hidden;
}

.boxauto {
  overflow: auto;
}

.overview_box {
  width: 100%;
  height: 100px;
  // background-color: red;
  display: flex;
  justify-content: space-around;

  .right-sun-tab {
    height: 81px;
    padding-left: 13px;
    width: 15%;
    display: flex;
    align-items: center;
    // background: linear-gradient(
    //   -33deg,
    //   rgba(82, 147, 247, 0.27) 0%,
    //   rgba(25, 54, 155, 0.27) 100%
    // );
    margin-bottom: 10px;

    img {
      width: 51px;
      height: 51px;
    }

    .right-value {
      margin-left: 10px;
      height: 60px;
      font-size: 17px;
      font-family: Source Han Sans SC;
      font-weight: 500;
      color: #68c8fa;
      // border: 1px solid red;
      display: flex;
      flex-direction: column;
      justify-content: center;

      .right-value-bo {
        display: flex;
        align-items: center;

        >div:first-of-type {
          font-size: 28px;
          font-family: YouSheBiaoTiHei;
          font-weight: 400;
          color: #ffffff;
          margin-right: 5px;
        }
      }
    }
  }
}
</style>
